<template>
  <div class="cp-box moudle">
    <div class="cp-header">
      <img class="cp-icon" src="../../assets/mini_accident/cp01.png" alt="">
      <h4 class="cp-title">基本信息</h4>
    </div>
    <ul v-if="answeringState" class="cp-content padding-none">
      <li class="ai-item">
        <div class="ai-title">
          <img class="img-a" src="../../assets/mini_accident/bh.png" alt=""/>
          <p class="margin-none">天气:</p>
        </div>
        <!--<el-input class="m-input" type="text" v-model="weather"></el-input>-->
        <el-select v-model="weather" filterable placeholder="请选择类型" clearable>
          <el-option
            v-for="item in optionsWeather"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
      <li class="ai-item">
        <div class="ai-title">
          <img class="img-a" src="../../assets/mini_accident/time.png" alt=""/>
          <p>时间:</p>
        </div>
        <el-date-picker v-model="accidentTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
      </li>
      <li class="ai-item">
        <div class="ai-title">
          <img class="img-a" src="../../assets/mini_accident/area.png" alt=""/>
          <p>地点:</p>
        </div>
        <el-input class="m-input" type="text" v-model="accidentAddress" disabled></el-input>
        <el-button type="primary" v-on:click="updateAddress">更新地址</el-button>
      </li>
    </ul>
    <div v-else class="no-data">
      <img class="nd-img" src="../../assets/mini_accident/no_data.png" alt="">
      <span>暂无信息</span>
    </div>
    <el-dialog title="更新地点" :visible.sync="dialogVisibleAMap">
      <el-autocomplete
        class="inline-input"
        v-model="accidentAddress"
        value-key="name"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect"
        @change="updateAccidentAddress"
        clearable>
      </el-autocomplete>
      <div class="map-container" ref="mapContainer"></div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleAMap = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisibleAMap = false">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import MapUtil from "@/util/MapUtil";

export default {
  name: "ExpressCenterAccidentInfo",
  mixins: [],
  data() {
    return {
      dialogVisibleAMap: false,
      optionsWeather: [{
        value: '晴',
        label: '晴'
      }, {
        value: '多云',
        label: '多云'
      }, {
        value: '阴',
        label: '阴'
      }, {
        value: '阵雨',
        label: '阵雨'
      }, {
        value: '雷阵雨',
        label: '雷阵雨'
      }, {
        value: '小雨',
        label: '小雨'
      }, {
        value: '中雨',
        label: '中雨'
      }, {
        value: '大雨',
        label: '大雨'
      }, {
        value: '暴雨',
        label: '暴雨'
      }, {
        value: '小雪',
        label: '小雪'
      }, {
        value: '中雪',
        label: '中雪'
      }, {
        value: '大雪',
        label: '大雪'
      }, {
        value: '雨夹雪',
        label: '雨夹雪'
      }, {
        value: '雾',
        label: '雾'
      }]
    };
  },
  computed: {
    answeringState() {
      return this.$store.state.MiniAccident.answeringState;
    },
    incomingMessage() {
      return this.$store.state.MiniAccident.incomingMessage;
    },
    weather: {
      get() {
        return this.$store.state.HousingInfo.weather;
      },
      set(value) {
        this.$store.commit('setWeather', value);
      }
    },
    accidentTime: {
      get() {
        return this.$store.state.HousingInfo.accidentTime;
      },
      set(value) {
        this.$store.commit('setAccidentTime', value);
      }
    },
    accidentAddress: {
      get() {
        return this.$store.state.HousingInfo.accidentAddress;
      },
      set(value) {
        this.$store.commit('setAccidentAddress', value);
      }
    }
  },
  watch: {},
  mounted() {
    if (this.answeringState) {
      this.$store.commit("setAccidentTime", this.incomingMessage.createTime);
      this.$store.commit("setAccidentAddress", this.incomingMessage.address);
    }
  },
  methods: {
    updateAccidentAddress(e) {
      this.$set(this.incomingMessage, "address", e);
      this.$store.commit("setAccidentAddress", e);
    },
    updateAddress() {
      this.dialogVisibleAMap = true;
      this.$nextTick(() => {
        let _mapContainer = this.$refs.mapContainer;
        MapUtil.initMap(_mapContainer, this.incomingMessage.longitude, this.incomingMessage.latitude);
      });
    },
    querySearch(queryString, cb) {
      let that = this;
      MapUtil.mapSearch(queryString).then(function (response) {
        let results = queryString ? response.filter(that.createFilter(queryString)) : response;
        cb(results);
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      MapUtil.markerMoveTo(item.location.lng, item.location.lat);
      this.$set(this.incomingMessage, "address", item.name);
      this.$set(this.incomingMessage, "longitude", item.location.lng);
      this.$set(this.incomingMessage, "latitude", item.location.lat);
      // this.$store.commit("setIncomingMessage", this.incomingMessage);
      this.$store.commit("setAccidentAddress", item.name);
    }
  }
};
</script>

<style scoped lang="scss">
@import 'src/styles/callpolice';

ul {
  list-style-type: none;
}

.cp-content {
  height: 350px;
  overflow-y: scroll;

  .ai-item {
    margin: 0px 0px 20px 0px;

    .ai-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 4px 0px 10px 0px;
    }

    p {
      font-size: 14px;
      color: #333;
      margin: 0px 0px 0px 10px;
    }
  }
}

.inline-input {
  width: 100%;
  margin: 0px 0px 16px 0px;
}

.map-container {
  height: 300px;
}

.cp-content::-webkit-scrollbar {
  display: none
}

.img-a {
  width: 16px;
  height: 16px;
}

.sign-img {
  width: 160px;
  height: 60px;
  margin-left: 27px;
}

.m-input {
  width: 220px;
  margin: 0px 10px 0px 0px;
}

textarea {
  width: 240px;
  height: 80px;
  box-sizing: border-box;
  padding: 10px;
}

.padding-none{
  padding: 0px;
}
.margin-none{
  margin: 0px;
}
</style>
